<template>
  <div
    v-if="top > 300"
    @click="scrollToTop"
    class="fixed bottom-4 right-4 md:bottom-10 md:right-10 z-50 p-3 rounded-full bg-white shadow-md dark:bg-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition"
  >
    <svg
      class="w-4 h-4 text-gray-500 dark:text-white"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 10 14"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 13V1m0 0L1 5m4-4 4 4"
      ></path>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const top = ref(0)
const mainEl = document.querySelector('#mainScroll')
mainEl?.addEventListener('scroll', () => {
  top.value = mainEl.scrollTop || 0
})
// 滚动到顶部
const scrollToTop = () => {
  mainEl?.scrollTo({
    top: 0, // 距离顶部位置
    behavior: 'smooth' // 平滑滚动效果
  })
}
</script>
